<template>
  <div class="info-container box-bg-color main-content">
    <el-tabs
      v-model="activeNames"
      type="border-card"
      class="tabs"
    >
      <el-tab-pane label="AI生成前端代码" name="1">
        <el-alert title="生成的代码是基础的Vu3代码，需要后续自己写更加复杂业务逻辑" type="warning" :closable="false" />
        <el-form
          ref="frontFormRef"
          label-position="right"
          label-width="100px"
          :inline="true"
          v-loading="loading"
        >
          <el-form-item label="帮我生成">
            <el-input v-model="filedName" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-radio-group v-model="codeType">
              <el-radio label="table" size="large">表格</el-radio>
              <el-radio label="form" size="large">表单</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="" prop="">
            <el-button type="primary" @click="createCode('front')">生成前端代码</el-button>
          </el-form-item>
        </el-form>
        <el-text type="danger">请在输入框输入代码业务名称，举例：要生成用户的代码，请输入用户二字即可</el-text>
        <Codemirror
          v-model="code"
          ref="frontCodeRef"
          basic
          :style="{ width: '100%', minHeight: '300px', fontSize: '16px' }"
          :extensions="extensions"
        />
      </el-tab-pane>
      <el-tab-pane label="AI生成后端代码" name="2">
        <el-alert title="生成的代码是基础的NestJs后端代码，需要后续自己写更加复杂业务逻辑" type="warning" :closable="false" />
        <el-form
          ref="frontFormRef"
          label-position="right"
          label-width="100px"
          :inline="true"
          v-loading="loading"
        >
          <el-form-item label="帮我生成">
            <el-input v-model="backendFiledName" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="" prop="">
            <el-button type="primary" @click="createCode('backend')">生成后端代码</el-button>
          </el-form-item>
        </el-form>
        <el-text type="danger">请在输入框输入代码业务名称，举例：要生成用户的代码，请输入用户二字即可</el-text>
        <Codemirror
          v-model="backendCode"
          ref="backendCodeRef"
          basic
          :style="{ width: '100%', minHeight: '300px', fontSize: '16px' }"
          :extensions="jsExtensions"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch, type PropType } from 'vue';
  import { UPDATE_MODEL_EVENT } from 'cm/contants';
  import { validPhone } from '@/utils/validate';
  import { ElMessage } from 'element-plus'

  import { Codemirror } from 'vue-codemirror'
  import { vue } from '@codemirror/lang-vue'
  import { javascript } from "@codemirror/lang-javascript";
  import { oneDark } from '@codemirror/theme-one-dark'

  import { aiSocket } from '@/utils/socket'

  // 扩展
  const extensions = [vue(), oneDark];

  const jsExtensions = [javascript(), oneDark];

  const activeNames = ref<string>('1');

  const loading = ref<boolean>(false);

  const filedName = ref<string>('');
  const codeType = ref<string>('table');
  const code = ref<string>('');
  const backendCode = ref<string>('');
  const backendFiledName = ref<string>('');
  const createCode = async (type: string) => {
    loading.value = true

    if (type === 'front') {
      if (filedName.value === '') {
        ElMessage({ type: 'error', message: `请您输入代码业务名称` })
        loading.value = false
        return false;
      }
    }

    if (type === 'backend') {
      if (backendFiledName.value === '') {
        ElMessage({ type: 'error', message: `请您输入代码业务名称` })
        loading.value = false
        return false;
      }
    }
    
    const typeText = codeType.value === 'table' ? '表格' : '表单';
    let contentText = ''

    if (type === 'front') {
      if (codeType.value === 'table') {
        contentText = `请帮我生成基于Element Plus和Vue3的${filedName.value}增删改查的${typeText}代码`
      }
      if (codeType.value === 'form') {
        contentText = `请帮我生成基于Element Plus和Vue3的${filedName.value}${typeText}代码`
      }
    }

    if (type === 'backend') {
      contentText = `请帮我生成基于NestJs的${backendFiledName.value}增删改查的代码并只返回对应的dto、entity、controller、service、module的代码`;
    }

    const res = await aiSocket('code', contentText);

    if (res) {
      loading.value = false;
      let aiResultData = res as any
      if (type === 'front') {
        let codeText = aiResultData.data.replace('```html', '').replace('```', '')
        code.value = codeText;
      }
      if (type === 'backend') {
        backendCode.value = aiResultData.data;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .btnBox {
    width: calc(100% - var(--sidebar-width));
    padding: 20px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width) !important;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    box-shadow: -6px 0px 16px 0 rgba(0,0,0,0.05);
  }

  .infoImage {
    width: 200px;
    height: 200px;
  }

  .info-container {
    padding-bottom: 60px
  }
</style>
